<template>
  <div class="motivationdetail">
    <div class="search sticky-search">
      <LabelDataPicker
        type="month"
        v-model="month"
        placeholder="请选择日期"
        size="mini"
        clearable
        value-format="yyyy-MM"
        format="yyyy-MM"
        @change="monthChange"
      />
      <LabelSelect
        placeholder="请选择营业部"
        size="mini"
        clearable
        v-model="dept"
        @change="monthChange"
      />
    </div>
    <el-table
      class="motivationdetail-table"
      :data="tableData"
      style="width: 100%"
      size="mini"
    >
      <el-table-column prop="date" label="日期"> </el-table-column>
      <el-table-column prop="branch" label="客户编号" width="180">
      </el-table-column>
      <el-table-column prop="newCustomerIncentives" label="交易日期">
      </el-table-column>
      <el-table-column prop="stockScaleIncentive" label="营业部">
      </el-table-column>
      <el-table-column prop="responsiblePersonIncentive" label="客户姓名">
      </el-table-column>
      <el-table-column
        prop="responsiblePersonIncentive"
        label="普通账户开户日期"
      >
      </el-table-column>
      <el-table-column
        prop="responsiblePersonIncentive"
        label="信用账户开户日期"
      >
      </el-table-column>

      <el-table-column
        prop="responsiblePersonIncentive"
        label="当月累计息费收入"
      >
      </el-table-column>
      <el-table-column
        prop="responsiblePersonIncentive"
        label="当月日均负债总额"
      >
      </el-table-column>
      <el-table-column
        prop="responsiblePersonIncentive"
        label="上月累计息费收入"
      >
      </el-table-column>
      <el-table-column prop="responsiblePersonIncentive" label="当月息费收入">
      </el-table-column>
      <el-table-column prop="responsiblePersonIncentive" label="税后息费收入">
      </el-table-column>

      <el-table-column prop="responsiblePersonIncentive" label="考核利率">
      </el-table-column>
      <el-table-column prop="responsiblePersonIncentive" label="资金成本">
      </el-table-column>

      <el-table-column prop="responsiblePersonIncentive" label="净息费收入">
      </el-table-column>
      <el-table-column
        prop="responsiblePersonIncentive"
        label="开发人员净息费收入提成"
      >
      </el-table-column>
      <el-table-column
        prop="responsiblePersonIncentive"
        label="分支机构净息费收入提成"
      >
      </el-table-column>
      <el-table-column prop="responsiblePersonIncentive" label="人员信息">
      </el-table-column>
      <el-table-column prop="responsiblePersonIncentive" label="人员编号">
      </el-table-column>
      <el-table-column prop="responsiblePersonIncentive" label="人员分类">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import LabelDataPicker from "@/components/LabelDataPicker.vue";
import LabelSelect from "@/components/LabelSelect.vue";
const tableData = [];
for (let index = 0; index < 6; index++) {
  tableData.push({
    date: "2016-05",
    branch: "宜昌东山大道证券营业部" + index,
    newCustomerIncentives: "1128.68749941063",
    stockScaleIncentive: "5259.23826563889",
    responsiblePersonIncentive: "6387.92576504953",
  });
}
export default {
  name: "motivationdetail",
  components: {
    LabelDataPicker,
    LabelSelect,
  },
  data() {
    return {
      month: "2025-02",
      dept: "",
      tableData,
    };
  },
  methods: {
    monthChange(value) {
      console.log("value", value);
    },
  },
};
</script>

<style lang="less" scoped>
.motivationdetail {
  height: 100%;
  padding: 5px 20px;
  display: flex;
  flex-direction: column;
  .search {
    position: sticky;
    top: 1px;
    z-index: 1;
    background-color: #e0b5b570;
    padding: 6px;
    display: flex;
    column-gap: 10px;
    ::v-deep .el-input {
      width: 250px;
    }
  }
  .motivationdetail-table {
    flex: 1;
  }
}
</style>
